<template>
	<view>
		<!-- 头部内容区 -->
		<view class="text-center user-card acea-row row-bottom row-center" :class="scrollY>100?'tit-red-bg':''"
			:style='{"height": statusBarHeight+"px"}'>
			<view style="height: 100rpx;">个人中心</view>
		</view>
		<view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" scroll-with-animation="true"
				:style="'height:' + height + 'px;'" @scroll="scroll">
				<view class="users">
					<view :style='{"height": statusBarHeight+"px"}'></view>
					<!-- 用户信息 -->
					<view class="userinfo acea-row row-top">
						<view class="left" @click="toUserCenter">
							<image src="../../static/images/user/avatar.png" mode="aspectFill" v-if="!avatarUrl">
							</image>
							<image :src="avatarUrl" mode="aspectFill" v-if="avatarUrl"></image>
						</view>
						<view class="middle acea-row row-column row-column">
							<view class="name">{{userInfo.nickname||'--'}}
							</view>
							<view class="icon_info acea-row row-top ">
								<view class="vipinfo acea-row row-middle" @click="toVip">
									<image class="icon" src="../../static/images/user/vipicon.png" alt=""
										mode="aspectFill">
										<!-- 黄金会员 -->
										VIP特权
										<image class="arrow" src="../../static/images/user/right_arrow_grey.png">
										</image>
								</view>
								<view class="icon_info_right acea-row row-column row-middle">
									<view class="process"></view>
									<view class="grade">1400/1700<text class="vip_text">升级vip</text>
									</view>
								</view>
							</view>
							<view class="follow">
								<text class="mr20" @click="toPage(7)">关注： {{star}}</text>
								<!-- <text @click="toPage(7)">粉丝： 400</text> -->
							</view>
						</view>
						<view class="right acea-row row-middle">
							<view class="right-tip acea-row row-center ">
								<view class="acea-row row-between">
									<view class="edit acea-row row-column row-middle" @click="toPage(1)">
										<image src="../../static/images/user/edit.png" mode="aspectFill"></image>
										<text>资料编辑</text>
									</view>
									<view class="edit setting" @click="toPage(2)">
										<image src="../../static/images/user/setting.png" mode="aspectFill"></image>
										<text>设置</text>
									</view>
								</view>
							</view>
							<view class="sign_tip acea-row row-between row-middle">
								<image src="../../static/images/user/gold_coin.png" mode="aspectFill"></image>
								<text @click="toPage(3)">签到赚钱</text>
							</view>
							<view class="sign_tip acea-row row-between row-middle">
								<image src="../../static/images/user/coin.png" mode="aspectFill"></image>
								<text @click="toPage(4)">金币充值</text>
							</view>
						</view>
					</view>
					<!-- 头部菜单 -->
					<view class="btm_content acea-row row-middle">
						<view class="acea-row top_content row-around">
							<view class="tips-box acea-row row-column row-middle" v-for="(item,index) in topMenuList"
								@click="toTopPage(item.type)">
								<text>{{item.num}}</text>
								<text class="little_font">{{item.name}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 我的收益 -->
				<view class="common_css profit">
					<view class="top acea-row row-between row-middle">
						<view class="left">
							我的收益
						</view>
						<view class="right acea-row row-right">
							<view class="left_btn" @click="toPage(8)">领任务,赚现金</view>
							<!-- <view class="right_btn" @click="toPage(6)">0手续费提现</view> -->
						</view>
					</view>
					<view class="bottom acea-row row-between">
						<view class="info acea-row row-column row-middle">
							<text class="num">0</text>
							<text class="title">昨日收益</text>
						</view>
						<view class="info acea-row row-column row-middle">
							<text class="num">0</text>
							<text class="title">累计收益(元)</text>
						</view>
						<view class="info acea-row row-column row-middle">
							<text class="num">0<text class="font13 font-weight">=0(元)</text></text>
							<text class="title">金币收益(个)</text>
						</view>
					</view>
				</view>
				<view class="common_css my_store">
					<view class="top acea-row row-between">
						<text :class="activeIdx==0?'active_color':''" @click="change(0)">我的发布</text>
						<text :class="activeIdx==1?'active_color':''" @click="change(1)">我的收藏</text>
						<text :class="activeIdx==2?'active_color':''" @click="change(2)">我参与的任务</text>
					</view>
					<view class="middle acea-row row-around">
						<view class="tip-box acea-row row-column row-middle" @click="myPubAndStore(1)">
							<image src="../../static/images/user/shops.png" mode="aspectFill"></image>
							<text>商铺房屋<block v-if="counts.shop">({{counts.shop?counts.shop:0}})</block></text>
						</view>
						<view class="tip-box acea-row row-column row-middle" @click="myPubAndStore(2)">
							<image src="../../static/images/user/usedidle.png" mode="aspectFill"></image>
							<text>二手<block v-if="counts.secondHand">({{counts.secondHand?counts.secondHand:0}}) </block></text>
						</view>
						<view class="tip-box acea-row row-column row-middle" @click="myPubAndStore(3)">
							<image src="../../static/images/user/serve.png" mode="aspectFill"></image>
							<text>商家服务<block v-if="counts.merchantService">({{counts.merchantService?counts.merchantService:0}})</block></text>
						</view>
						<view class="tip-box acea-row row-column row-middle" @click="myPubAndStore(4)">
							<image src="../../static/images/user/link.png" mode="aspectFill"></image>
							<text>供应链<block v-if="counts.supple">({{counts.supple?counts.supple:0}})</block></text>
						</view>
						<view class="tip-box acea-row row-column row-middle" @click="myPubAndStore(5)">
							<image src="../../static/images/user/recruitment.png" mode="aspectFill"></image>
							<text>招工<block v-if="counts.recruit">({{counts.recruit?counts.recruit:0}})</block></text>
						</view>
					</view>
					<view class="bottom acea-row row-between">
						<view class="tipbox acea-row row-center row-middle">
							<image src="../../static/images/user/uplist.png" mode="aspectFill"></image>
							置顶记录
						</view>
						<view class="tipbox acea-row row-center row-middle">
							<image src="../../static/images/user/sharelist.png" mode="aspectFill"></image>
							群发记录
						</view>
						<view class="tipbox acea-row row-center row-middle">
							<image src="../../static/images/user/refresh.png" mode="aspectFill"></image>
							刷新记录
						</view>
					</view>
				</view>
				<view class="common_css common_tab acea-row row-around">
					<view class="tip-box1 acea-row row-column row-middle" @click="myStorePage(5)">
						<image src="../../static/images/user/brand.png" mode="aspectFill"></image>
						我的品牌
					</view>
					<view class="tip-box1 acea-row row-column row-middle" @click="myStorePage(1)">
						<image src="../../static/images/user/my_wallet.png" mode="aspectFill"></image>
						我的账户
					</view>
					<view class="tip-box1 acea-row row-column row-middle" @click="myStorePage(2)">
						<image src="../../static/images/user/my_order.png" mode="aspectFill"></image>
						我的订单
					</view>

					<view class="tip-box1 acea-row row-column row-middle" @click="myStorePage(3)">
						<image src="../../static/images/user/promot.png" mode="aspectFill"></image>
						下级成员
					</view>
					<view class="tip-box1 acea-row row-column row-middle" @click="myStorePage(4)">
						<image src="../../static/images/user/coinstore.png" mode="aspectFill"></image>
						赏金商城
					</view>
				</view>
				<view class="common_css common_tab acea-row row-around">
					<view class="tip-box1 acea-row row-column row-middle" @click="myStorePage(9)">
						<image src="../../static/images/user/project.png" mode="aspectFill"></image>
						我的项目
					</view>
					<view class="tip-box1 acea-row row-column row-middle" @click="myStorePage(6)">
						<image src="../../static/images/user/property.png" mode="aspectFill"></image>
						我的物业
					</view>
					<view class="tip-box1 acea-row row-column row-middle" @click="myStorePage(7)">
						<image src="../../static/images/user/purse.png" mode="aspectFill"></image>
						我的生意
					</view>
					<view class="tip-box1 acea-row row-column row-middle" @click="myStorePage(8)">
						<image src="../../static/images/user/company.png" mode="aspectFill"></image>
						我的企业
					</view>

					<view class="tip-box1 acea-row row-column row-middle" @click="myStorePage(10)">
						<image src="../../static/images/user/contact.png" mode="aspectFill"></image>
						联系人管理
					</view>
				</view>
				<view class="common_css banner">
					<image src="https://image.shanghepu.com/cdn/images/user/banner.png" mode="aspectFill"></image>
				</view>
				<view class="common_css activity">
					<view class="top">
						热门活动
					</view>
					<view class="bottom acea-row row-between row-middle">
						<view class="tipbox acea-row left row-middle">
							<view class="tip acea-row row-column" @click="toPage(3)">
								<text class="font26">签到领好礼</text>
								<text class="font22 col_999">已连续签到2天</text>
							</view>
							<image src="../../static/images/user/sign.png" mode="aspectFill" class="image1"></image>
						</view>
						<view class="tipbox acea-row right row-middle">
							<view class="tip acea-row row-column">
								<text class="font26">邀请好礼</text>
								<text class="font22 col_999">成功下单领金币</text>
							</view>
							<image :src="$imagesCdn+'/images/user/find.png'" mode="aspectFill" class="image2"></image>
						</view>
					</view>
				</view>
				<view class="recom_title">精选推荐</view>
				<view class="recommend acea-row">
					<view class="tipbox acea-row row-column" @click="toDetail(item)" v-for="item in toRecommend"
						:key='item.id' style="margin-bottom: 30rpx;">
						<image :src="$splitImage(item.shopfrontPhoto).imageArray&&$splitImage(item.shopfrontPhoto).imageArray.length>0?$splitImage(item.shopfrontPhoto).imageArray[0]:''" mode="aspectFill"></image>
						<view class="info acea-row row-column-between" style="flex-wrap: nowrap;">
							<view class="title line2">
								{{item.title}}
							</view>
							<view class="acea-row" style="overflow: auto;max-height: 95rpx;  align-items: flex-start;">
								<text class="tip1 tips"
									v-for=" tags in item.storeAdvantage?item.storeAdvantage.split('/'):[]"
									:key="tags">{{tags}}</text>
								<!-- 	<text class="tip1 tips">有免租期</text> 	
								<text class="tip2 tips">商业街店铺</text>
								<text class="tip2 tips">商业街店铺</text> -->
							</view>
							<view class="price acea-row row-between row-middle">
								<text class="red">{{item.rent}}元/月</text>
								<!-- <text class="gary">2人想要</text> -->
							</view>
						</view>
					</view>
					<!-- 					<view class="tipbox acea-row row-column">
						<image src="../../static/images/f.png" mode="aspectFill"></image>
						<view class="info acea-row row-column-between ">
							<view class="title line2">
								啥啥啥
							</view>
							<view class="acea-row">
								<text class="tip1 tips">7年老店</text>
								<text class="tip1 tips">有免租期</text>
								<text class="tip1 tips">餐饮</text>
								<text class="tip2 tips">商业街店铺</text>
								<text class="tip2 tips">商业街店铺</text>
							</view>
							<view class="price acea-row row-between row-middle">
								<text class="red">3700元/月</text>
								<text class="gary">2人想要</text>
							</view>
						</view>
					</view> -->
					<view class='loadingicon acea-row row-center row-middle'>
						<text class='loading iconfont icon-jiazai' :hidden='loadingHide'></text>{{loadTitle}}
					</view>
				</view>
				<view class="uni-p-b-98"></view>
			</scroll-view>
		</view>

		<tabBar :pagePath="'/pages/user/index'"></tabBar>
		<u-loading-page :loading="loading"></u-loading-page>
	</view>
</template>

<script>
	var app = getApp();
	import tabBar from "@/components/tabBar";
	import {
		getIndividual
	} from '@/api/api.js'
	import {
		getRecommend
	} from '@/api/api.js'
	import {
		getUFriendFansCount,
		getCollectCount,
		getReleaseCount
	} from '@/api/user.js'
	import {
		mapGetters
	} from "vuex";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		log
	} from "util";

	import {
		data
	} from "../../subpackageuni/uview-ui/libs/mixin/mixin";
	import {
		getMonList
	} from "@/api/api.js"
	export default {
		components: {
			tabBar,
		},
		data() {
			return {
				scrollY: 0,
				scrollTop: 0,
				height: 0,
				statusBarHeight: 0,
				activeIdx: 0,
				userInfo: false,
				avatarUrl: null,
				nickName: null,
				topMenuList: [{
						name: '金币',
						num: 0,
						type: 1,
						f: 'integral'
					},
					{
						name: '优惠券',
						num: 2,
						type: 2,
						f: 'coupon'
					},
					{
						name: '收藏',
						num: 0,
						type: 3,
						f: 'collect'
					},
					{
						name: '浏览',
						num: 0,
						type: 4,
						f: 'browse'
					},
					{
						name: '沟通',
						num: 0,
						type: 5,
						f: 'communication'
					}
				],
				loading: true,
				toRecommend: [],
				page: 1,
				limit: 10,
				loadTitle: '',
				loadingHide: true,
				star: 0,
				counts: {},
				gz: {}
			};
		},
		computed: {
			...mapGetters(['isLogin']),
		},
		created() {
			this.getList()
			this.getRecommendList()
			this.getCount();
			this.getGz();
		},

		onLoad() {
			// #ifdef MP || APP-PLUS
			let height = app.globalData.navHeight;
			
			// this.statusBarHeight = height > 70 ? 70 : height + 4;
			this.statusBarHeight = uni.getMenuButtonBoundingClientRect().bottom+4;
			
			// #endif
			// #ifdef H5
			this.statusBarHeight = 20;
			// #endif
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.height = res.windowHeight;
				}
			});
		},
		onShow() {
			console.log("isLogin",this.isLogin)
			if (!this.isLogin) {
				// toLogin();
				// _this.avatarUrl = _this.userInfo.avatar ? _this.userInfo.avatar :
				// 	'../../../static/images/f.png';
				this.nickname = '点击请登录'
			} else {
				this.getUserInfo();
				this.getCount();
				this.getList();
				this.getCollectCounts()
			}
		},
		methods: {
			toDetail(item) {
				uni.navigateTo({
					url: '/pages/details/shopRent/shopRent?id='+item.id+'&storeCategory='+item.storeCategory+'&st='+item.status
				})
			},
			scroll: function(e) {
				var that = this,
					scrollY = e.detail.scrollTop < 10 ? 0 : e.detail.scrollTop;
				var opacity = scrollY / 200;
				opacity = opacity > 1 ? 1 : opacity;
				that.$set(that, 'scrollY', scrollY);
			},
			change(num) {
				if (num == 2) {
					this.toPage(5);
					return;
				}
				this.activeIdx = num;
				this.getCollectCounts()
				// if (num == 1) this.toTopPage(2)

			},
			//跳转个人主页
			toUserCenter() {
				let that = this;
				uni.navigateTo({
					url: '/pages/details/merchantInfo/merchantInfo?type=personal&gxInfo=',
				})
			},
			toVip() {
				wx.navigateTo({
					url: '/pages/aboutUsers/memberCenter/memberCenter'
				})
			},
			toTopPage(type) {
				console.log(type)
				let url = '';
				if (type == 5) {
					uni.switchTab({
						url: '/pages/messages/messages'
					})
					return;
				}
				if (type == 1) url = '/pages/users/user_integral/index';
				if (type == 2) url = '/pages/users/user_coupon/index'; //旧的? --哦
				if (type == 3) url = '/pages/aboutUsers/userCollection/userCollection';
				if (type == 4) url = '/pages/goods/browsing_history/index';
				wx.navigateTo({
					url
				});
			},
			toPage(type) {
				let url = '';
				if (type == 1) url = '/pages/users/user_info/index';
				if (type == 2) url = '/pages/users/user_setting/index';
				if (type == 3) url = '/pages/users/user_sgin/index'; //旧的
				if (type == 4) url = '/pages/aboutUsers/userGoldcoin/userGoldcoin';
				if (type == 5) url = '/pages/aboutUsers/promotionTask/promotionTask'
				if (type == 6) url = '/pages/aboutUsers/aboutUsers/income' //旧的
				if (type == 7) url = '/pages/aboutUsers/aboutUsers/fans'
				if (type == 8) url = '/pages/others/promotionTask/promotionTask'
				wx.navigateTo({
					url
				});
			},
			myStorePage(type) {
				console.log('type--', type)
				let url = '';
				if (type == 1) url = '/pages/users/user_money/index';
				if (type == 2) url = '/pages/goods/order_list/index';
				if (type == 3) url = '/pages/aboutUsers/aboutUsers/member';
				if (type == 4) url = '/pages/goods/goods_list/index'; //金币商城
				if (type == 5) url = '/pages/releases/brand/brand';
				if (type == 6) url = '/pages/aboutUsers/propertysList/propertysList';
				if (type == 7) url = '/pages/aboutUsers/aboutUsers/business';
				if (type == 8) url = '/pages/aboutUsers/aboutUsers/company';
				if (type == 9) url = '/pages/aboutUsers/aboutUsers/project';
				if (type == 10) url = '/pages/aboutUsers/contacstList/contacstList';
				wx.navigateTo({
					url
				});
			},
			myPubAndStore(type) {
				let url = '';
				if (this.activeIdx == 0) {
					if (type == 1) url = '/pages/releases/rentalStores/rentalStores';
					if (type == 2) url = '/pages/releases/second-hand/second-hand';
					if (type == 3) url = '/pages/releases/business/business';
					if (type == 4) url = '/pages/releases/mySupplyChain/mySupplyChain';
					if (type == 5) url = '/pages/releases/job/job';
				} else if (this.activeIdx == 1) {
					url = '/pages/aboutUsers/userCollection/userCollection?type=' + (type - 1)
				}

				wx.navigateTo({
					url
				});
			},
			getUserInfo(data) {
				var _this = this;
				this.$store.dispatch('USERINFO').then((res) => {
					console.log(res)
					_this.userInfo = res;
					_this.avatarUrl = _this.userInfo.avatar ? _this.userInfo.avatar :
						'../../../static/images/f.png';
					_this.nickname = _this.userInfo.nickname ? _this.userInfo.nickname : '-';
					_this.$forceUpdate();
					_this.loading = false
				});
			},
			getList() {
				getIndividual().then(res => {
					if (res.code == 200) {
						let d = res.data;
						this.topMenuList.forEach(item => {
							item.num = d[item.f] ? d[item.f] : 0;
						})
					}

				})
			},
			async getCollectCounts() {
				try {
					let res = null;
					if (this.activeIdx == 0) {
						res = await getReleaseCount()
					} else if (this.activeIdx == 1) {
						res = await getCollectCount()
					}
					if (res.code == 200) {
						this.counts = res.data
						if (this.activeIdx == 0) {
							// this.counts.secondHand = this.counts.unused
						}
					}
				} catch (e) {

				}



			},
			getGz() {
				getMonList().then(res => {
					// console.log('rmb',res)
					this.gz = res.data
				})
			},
			getRecommendList() {
				this.loadingHide = false;
				getRecommend({
					city: this.$city,
					limit: this.limit,
					page: this.page
				}).then(res => {
					if (res.code == 200) {
						this.toRecommend = res.data.list
						this.loadingHide = true;
						if (this.page == 1) {
							this.toRecommend = res.data.list;
							if (this.toRecommend.length <= 0) {
								this.loadTitle = '暂无数据'
							}
						} else {
							this.toRecommend = this.toRecommend.concat(res.data.list);
							if (res.data.list.length <= 0) {
								this.loadTitle = '已无更多推荐'
							}
						}
					}

				})
			},
			//获取关注粉丝数量
			getCount() {
				getUFriendFansCount().then(res => {
					if (res.code == 200) {
						this.star = res.data.attention;
					}
				})
			},
		},
		onReachBottom() {
			console.log('触底触发')
			this.page++;
			this.getRecommendList();
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f7f8fa;
	}

	.red {
		color: #EE212D;
	}

	.gary {
		color: #A6A6A6;
	}

	.font22 {
		font-size: 22rpx;
	}

	.font26 {
		font-size: 26rpx;
	}

	.col_999 {
		color: #999;
	}

	.tips {
		padding: 4rpx 8rpx;
		border-radius: 5px;
		font-size: 20rpx;
		margin-right: 10rpx;
		margin-bottom: 8rpx;
	}

	.tip1 {
		color: #EF212D;
		background: #FFF0F0;

	}

	.tip2 {
		color: #52688B;
		background: #F8F9FD;
	}

	.common_css {
		width: 694rpx;
		margin: 24rpx auto 0;
		border-radius: 10rpx;
		background-color: #fff;
		box-sizing: border-box;
	}

	.user-card {
		width: 100%;
		position: fixed;
		top: 0;
		color: #fff;
		font-size: 34rpx;
		// height: 74rpx;
		z-index: 9;
	}

	.user-card.tit-red-bg {
		background: #ff3b33;
	}

	.title.line2 {
		display: inline-block !important;
		overflow: hidden !important;
		white-space: nowrap !important;
		/*文本强制一行显示*/
		overflow: hidden !important;
		/*文本溢出隐藏*/
		text-overflow: ellipsis !important;
	}

	.users {
		position: relative;
		width: 100%;
		height: 494rpx;
		box-sizing: border-box;
		background-image: url("https://image.shanghepu.com/cdn/images/user/user_bg.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;



		.btm_content {
			width: 100%;
			position: absolute;
			bottom: -67rpx;
		}

		.top_content {
			position: relative;
			width: 694rpx;
			margin: 0 auto;
			border-radius: 20rpx;
			height: 134rpx;
			background-color: #fff;
			box-sizing: border-box;
			padding: 30rpx 0;

			.tips-box {
				position: relative;
				font-size: 32rpx;
				flex: 1;

				.little_font {
					font-size: 26rpx;
				}

				&:not(:last-child)::after {
					content: '';
					position: absolute;
					right: 0;
					display: inline-block;
					top: 50%;
					transform: translateY(-50%);
					background-color: #eee;
					width: 2rpx;
					height: 40rpx;
				}
			}
		}

		.right-tip {
			width: 100%;
			// position: absolute;
			// right: 28rpx;
			// top: 0;
			margin-bottom: 12rpx;

			.setting {
				margin-left: 26rpx;
			}

			.edit {
				font-size: 20rpx;

				image {
					width: 36rpx;
					height: 35rpx;
					display: block;
					margin-bottom: 20rpx;
				}

			}
		}

		.userinfo {
			padding-left: 32rpx;
			position: relative;
			height: 200rpx;
			width: 100%;
			box-sizing: border-box;
			color: #fff;

			.left {
				width: 116rpx;
				height: 116rpx;
				border-radius: 58rpx;
				margin-right: 20rpx;

				image {
					width: 116rpx;
					height: 116rpx;
					display: block;
				}
			}

			.middle {
				flex: 1;

				.icon_info {
					margin: 14rpx 0;

					.vipinfo {
						padding: 0 8rpx;
						font-size: 22rpx;
						height: 42rpx;
						border-radius: 24rpx;
						background-color: #ffe3b1;
						color: #916130;
						width: 180rpx;
						box-sizing: border-box;

						.icon {
							width: 35rpx;
							height: 30rpx;
							margin-right: 6rpx;
						}

						.arrow {
							width: 28rpx;
							height: 26rpx;
						}
					}

					.icon_info_right {
						margin-top: 6rpx;
						margin-left: 12rpx;

						.process {
							height: 8rpx;
							width: 170rpx;
							background-color: #fff;
							border-radius: 4rpx;
							margin-bottom: 4rpx;
						}

						.grade {
							font-size: 20rpx;

							.vip_text {
								font-size: 22rpx;
								color: #ffcf9e;
							}
						}
					}
				}
			}

			.right {
				width: 170rpx;
				// height: 122rpx;

				.sign_tip {
					width: 170rpx;
					box-sizing: border-box;
					padding: 0 12rpx;
					height: 50rpx;
					background-color: #e6231c;
					color: #fff;
					border-top-left-radius: 28rpx;
					border-bottom-left-radius: 28rpx;
					font-size: 24rpx;
					margin-top: 12rpx;

					image {
						width: 34rpx;
						height: 36rpx
					}
				}
			}

		}
	}

	.profit {
		margin-top: 87rpx;
		height: 244rpx;
		padding: 18rpx 24rpx 36rpx;
		color: #333;

		.bottom {
			margin-top: 30rpx;

			.info {
				color: #333;
				position: relative;

				&:nth-child(1) {
					width: 192rpx;
				}

				&:nth-child(2) {
					flex: 1;
				}

				&:last-child {
					width: 220rpx;
				}

				.num {
					font-size: 30rpx;
					font-weight: 600;
					margin-bottom: 12rpx;
				}

				.title {
					color: #A6A6A6;
					font-size: 26rpx;
				}

				.font13 {
					font-size: 26rpx;
				}

				.font-weight {
					font-weight: 400;
				}

				&:not(:last-child)::after {
					content: '';
					position: absolute;
					right: 0;
					display: inline-block;
					top: 50%;
					transform: translateY(-50%);
					background-color: #eee;
					width: 2rpx;
					height: 70rpx;
				}
			}
		}

		.top {
			border-bottom: 2rpx solid #eee;
			padding: 0 4rpx 26rpx;

			.left {
				font-size: 28rpx;
			}

			.right {
				flex: 1;

				.left_btn {
					border-radius: 30px;
					width: 200rpx;
					height: 48rpx;
					color: #EE212D;
					margin-right: 10rpx;
					line-height: 44rpx;
					text-align: center;
					box-sizing: border-box;
					border: 2rpx solid #EE212D;
				}

				.right_btn {
					background-color: #EE212D;
					color: #fff;
					border-radius: 30px;
					width: 200rpx;
					height: 48rpx;
					line-height: 44rpx;
					box-sizing: border-box;
					text-align: center;
					border: 2rpx solid #EE212D;
				}
			}
		}

	}

	.my_store {
		padding: 24rpx 28rpx 38rpx;

		.top {
			margin-bottom: 42rpx;
			border-bottom: 2rpx solid #eee;

			text {
				color: #383838;
				font-size: 30rpx;
				padding-bottom: 12rpx;
			}

			.active_color {
				color: #E6251D;
				border-bottom: 2rpx solid #E6251D;
			}
		}

		.middle {
			margin-bottom: 26rpx;
		}

		.bottom {
			.tipbox {
				width: 202rpx;
				height: 60rpx;
				background: #F7F8FA;

				image {
					width: 28rpx;
					height: 26rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.banner {
		image {
			width: 100%;
			height: 220rpx;
			display: block;
		}
	}

	.activity {
		padding: 16rpx 34rpx 34rpx;

		.top {
			font-size: 32rpx;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #eee;
		}

		.bottom {
			margin-top: 32rpx;

			.left {
				width: 48%;
				border-right: 2rpx solid #eee;
			}

			.tipbox {
				height: 113rpx;
				box-sizing: border-box;

				.font26 {
					margin-bottom: 4rpx;
				}

				.tip {
					margin-right: 16rpx;
				}

				.image1 {
					width: 107rpx;
					height: 76rpx;
				}

				.image2 {
					width: 119rpx;
					height: 109rpx;
				}
			}
		}
	}

	.recom_title {
		font-size: 32rpx;
		color: #000000;
		margin: 24rpx 0 24rpx 36rpx;
	}

	.recommend {
		padding: 0 30rpx;
		box-sizing: border-box;
		width: 100%;

		.tipbox {
			width: 48%;
			height: 530rpx;
			border-radius: 20rpx;
			background-color: #fff;

			&:nth-child(odd) {
				margin-right: 4%;
			}

			image {
				height: 286rpx;
				width: 100%;
				display: block;
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
			}

			.info {
				flex: 1;
				width: 100%;
				padding: 16rpx;
				box-sizing: border-box;
				overflow: hidden;

				.title {
					font-size: 28rpx;
					color: #000;
					margin-bottom: 12rpx;
				}

				.price {
					width: 100%;

					.red {
						font-weight: 500;
						font-size: 28rpx;
						word-break: break-all;
					}

					.gary {
						font-size: 24rpx;
					}
				}
			}
		}
	}

	.common_tab {
		height: 178rpx;
		padding: 36rpx 0;
		box-sizing: border-box;

	}

	.tip-box {
		image {
			width: 54rpx;
			height: 54rpx;
			margin-bottom: 12rpx
		}

	}

	.tip-box1 {
		image {
			width: 60rpx;
			height: 60rpx;
			margin-bottom: 10rpx
		}

	}
</style>